<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Screenshot browser</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./interactive.css">
</head>
<body>
  <header>
    <div class="header-container">
      <h1>File: <span class="file">...</span></h1>
      <h2>Percentage difference: <span class="percentage">...</span></h2>
    </div>
  </header>
  <div class="shortcuts">
    <div class="shortcut-container">
      <h3>Shortcuts:</h3>
      <ul>
        <li class="shortcut shortcut-golden">Choose golden</li>
        <li class="shortcut shortcut-generated">Choose test output</li>
        <li class="shortcut shortcut-confirm">Confirm choice</li>
        <li class="shortcut shortcut-skip">Skip test</li>
      </ul>
    </div>
  </div>
  <main>
    <div class="main-container">
      <div class="golden">
        <h3>Golden</h3>
        <div class="image-container"></div>
      </div>

      <div class="generated">
        <h3>Test output</h3>
        <div class="image-container"></div>
      </div>
    </div>
  </main>
  <footer>
    <button class="test-skip" disabled>Skip</button> <button class="test-confirm" disabled>Confirm</button>
  </footer>
  <div class="diff"></div>
  <div class="status"></div>
  <script src="./interactive.js"></script>
</body>
</html>
